<template>
	<section>
		<mt-header fixed class="fontc0" title="持仓"></mt-header>
		<div>
			<Board :winLossMoney="winLossMoney" :sellAll="sellAll"/>
			<div class="nav fs14 fontc2 bgwhite">
				<span :class="{red:this.orderType==='1'}" @click="toggleOrderType('1')">
					<i v-show="curDisplay==='all'">持仓中</i>
					<i v-show="curDisplay==='win'">盈利订单</i>
					<i v-show="curDisplay==='loss'">亏损订单</i>
					<span class="iconfont icon-zhankaixia" @click="showFilter=!showFilter"></span>
				</span>
				<span :class="{red:this.orderType==='2'}" @click="toggleOrderType('2')">
					<i>挂单中</i>
				</span>

				<ul class="lh30 fs12 bgwhite" v-show="showFilter">
					<li class="pl15 pr15" @click="filterAll" :class="{red:curDisplay==='all'}">全部</li>
					<li class="pl15 pr15" @click="filterWin" :class="{red:curDisplay==='win'}">盈利订单</li>
					<li class="pl15 pr15" @click="filterLoss" :class="{red:curDisplay==='loss'}">亏损订单</li>
				</ul>
			</div>
			<!-- tab-container -->
			<mt-tab-container v-model="getSelected">
				<mt-tab-container-item id="1">
					<Basehigh :quotaOrder="quotaOrder" :holdOrderShow="holdOrderShow"/>
				</mt-tab-container-item>
				<!-- 挂单 -->
				<mt-tab-container-item id="2">
					<Hang :gold="gold" :quotaPendingOrder="quotaPendingOrder"/>
				</mt-tab-container-item>
			</mt-tab-container>
			<Nav></Nav>
		</div>
	</section>
</template>
<script>
import Nav from '@/pages/Nav'
//tab组件
import { MessageBox, Indicator, Toast, Actionsheet, Navbar, TabItem, TabContainer, TabContainerItem } from 'mint-ui'

import { mapState, mapGetters, mapMutations } from 'vuex'

import { quotaQuotaGetAllNewlyQuotaData } from '@api/quota.js'
import { orderNewOrderFindNewOrderList, orderPendingOrderFindPendingOrder, orderNewOrderNnwindAllNewOrder, orderPendingOrderCanclePendingOrder } from '@api/order.js'

import Board from './subPage/board.vue'
import Basehigh from './subPage/basehigh.vue'
import Hang from './subPage/hang.vue'

export default {
	name: 'Order',
	components: {
		Board,
		Basehigh,
		Hang,
		Nav,
		'mt-navbar': Navbar,
		'mt-tab-item': TabItem,
		'mt-tab-container': TabContainer,
		'mt-tab-container-item': TabContainerItem
	},
	data() {
		return {
			userInfo: {},
			order: [],
			pendingOrder: [],
			quota: [],
			curDisplay: 'all',
			showFilter: false,
			money: 123,
			//设置止盈止损
			showSetWinLoss: false,
			curWinLossItem: {},
			curWinLossItemStopLossBeat: 0,
			curWinLossItemStopWinBeat: 0,

			//保存当前类型是追单 还是平仓并追单 add/ reverseAdd
			buyType: '', //追单
			showBuyItem: false,
			curBuyItem: {},
			curBuyHand: 1
		}
	},
	mounted() {
		this.getOrder()
		this.getPendingOrder()
		this.getAllQuota()
		this.$store.commit('setToOrder', false) //恢复chart页面watch的跳转操作;
	},
	computed: {
		...mapState(['gold', 'orderType', 'allVariety']),
		getSelected: {
			get() {
				return this.orderType
			},
			set(value) {
				if (value !== this.orderType) {
					this.$store.commit('setOrderType', value)
				}
			}
		},
		quotaOrder() {
			this.order.forEach((value, idx, arr) => {
				this.quota.forEach((v, i, a) => {
					if (value.varietyType === v.varietyType) {
						this.$set(value, 'lastPrice', +v.lastPrice)
						var pointMoney = +value.eachPointMoney * value.beatFewPoints
						this.$set(value, 'pointMoney', pointMoney)
						if (value.direction === 1) {
							var money = (value.lastPrice - value.realAvgPrice) * value.eachPointMoney * value.handsNum * value.tradeRate
						}
						if (value.direction === 0) {
							var money = (value.realAvgPrice - value.lastPrice) * value.eachPointMoney * value.handsNum * value.tradeRate
						}
						this.$set(value, 'earnMoney', money)
					}
				})
				this.allVariety.forEach((v, i, a) => {
					if (v.varietyType === value.varietyType) {
						value.contractsCode = v.contractsCode
					}
				})
			})

			return this.order
		},
		quotaPendingOrder() {
			this.pendingOrder.forEach((value, idx, arr) => {
				this.quota.forEach((v, i, a) => {
					if (value.varietyType === v.varietyType) {
						this.$set(value, 'lastPrice', +v.lastPrice)
						var pointMoney = +value.eachPointMoney * value.beatFewPoints
						this.$set(value, 'pointMoney', pointMoney)
						if (value.direction === 1) {
							var money = (value.lastPrice - value.realAvgPrice) * value.eachPointMoney
						}
						if (value.direction === 0) {
							var money = (value.realAvgPrice - value.lastPrice) * value.eachPointMoney
						}
						this.$set(value, 'earnMoney', money)
					}
				})
			})
			return this.pendingOrder
		},
		//总浮动盈亏
		winLossMoney() {
			if (this.quotaOrder && this.quotaOrder.length > 0) {
				let money = 0
				this.quotaOrder.forEach((value, idx, arr) => {
					money += value.earnMoney * value.ratio
				})

				return money
			} else {
				return 0
			}
		}
	},
	methods: {
		...mapMutations(['setGold', 'setOrderType', 'setCurVariety']),
		toggleOrderType(type) {
			this.$store.commit('setOrderType', type)
		},
		holdOrderShow(item) {
			if (this.curDisplay === 'all') {
				return true
			} else if (this.curDisplay === 'win') {
				if (item.earnMoney >= 0) {
					return true
				} else {
					return false
				}
			} else if (this.curDisplay === 'loss') {
				if (item.earnMoney < 0) {
					return true
				} else {
					return false
				}
			} else {
				return true
			}
		},

		getOrder() {
			orderNewOrderFindNewOrderList({
				payType: this.gold ? 0 : 1
			})
				.then(res => {
					if (res.code === 200) {
						this.order = res.data
					} else if (res.code === 503) {
						Toast('请先登录')
						this.$router.push({
							path: '/login'
						})
					} else {
						MessageBox(res.msg ? res.msg : '出错')
					}
				})
				.then(() => {
					if (this && this._isDestroyed) return
					this.orderTimer = setTimeout(() => {
						this.getOrder()
					}, 1200)
				})
				.catch(() => {
					if (this && this._isDestroyed) return
					this.orderTimer = setTimeout(() => {
						this.getOrder()
					}, 1200)
				})
		},
		getPendingOrder() {
			orderPendingOrderFindPendingOrder({
				payType: this.gold ? 0 : 1
			})
				.then(res => {
					if (res.code === 200) {
						this.pendingOrder = res.data
					} else if (res.code === 503) {
						Toast('请先登录')
						this.$router.push({
							path: '/login'
						})
					} else {
						MessageBox(res.msg ? res.msg : '出错')
					}
				})
				.then(() => {
					clearTimeout(this.pendingOrderTimer)
					if (this && this._isDestroyed) return
					this.pendingOrderTimer = setTimeout(() => {
						this.getPendingOrder()
					}, 1500)
				})
				.catch(() => {
					clearTimeout(this.pendingOrderTimer)
					if (this && this._isDestroyed) return
					this.pendingOrderTimer = setTimeout(() => {
						this.getPendingOrder()
					}, 1500)
				})
		},
		//加载所有行情,
		getAllQuota() {
			quotaQuotaGetAllNewlyQuotaData()
				.then(res => {
					if (res.code === 200) {
						//修改追单的时时价格
						if (this.curBuyItem.lastPrice) {
							res.data.forEach((value, idx, arr) => {
								if (value.varietyType == this.curBuyItem.varietyType) {
									this.$set(this.curBuyItem, 'lastPrice', value.lastPrice)
								}
							})
						}
						this.quota = res.data
					}
				})
				.then(() => {
					clearTimeout(this.quotaTimer)
					if (this && this._isDestroyed) return
					this.quotaTimer = setTimeout(() => {
						this.getAllQuota()
					}, 1000)
				})
				.catch(() => {
					clearTimeout(this.quotaTimer)
					if (this && this._isDestroyed) return
					this.quotaTimer = setTimeout(() => {
						this.getAllQuota()
					}, 1000)
				})
		},
		//一键平仓
		sellAll() {
			var unwindData = []
			this.quotaOrder.forEach(value => {
				if (this.curDisplay === 'all') {
					unwindData.push({
						batchNo: value.batchNo,
						unwindPrice: value.lastPrice
					})
				} else if (this.curDisplay === 'win') {
					if (value.earnMoney >= 0) {
						unwindData.push({
							batchNo: value.batchNo,
							unwindPrice: value.lastPrice
						})
					}
				} else if (this.curDisplay === 'loss') {
					if (value.earnMoney < 0) {
						unwindData.push({
							batchNo: value.batchNo,
							unwindPrice: value.lastPrice
						})
					}
				} else {
					console.log('过滤订单类型出错')
					return true
				}
			})
			orderNewOrderNnwindAllNewOrder(
				{
					payType: this.gold ? 0 : 1,
					unwindData: JSON.stringify(unwindData)
				},
				'平仓中···'
			).then(res => {
				MessageBox('一键平仓', res.msg)
				if (res.code === 200) {
					this.$store.dispatch('getUserInfo')
				}
			})
		},
		toogleGold() {
			this.$store.commit('setGold', !this.gold)
		},
		filterAll() {
			this.curDisplay = 'all'
			this.showFilter = false
		},
		filterWin() {
			this.curDisplay = 'win'
			this.showFilter = false
		},
		filterLoss() {
			this.curDisplay = 'loss'
			this.showFilter = false
		},
		toOrderDetail(item) {
			this.allVariety.map((value, idx) => {
				if (value.varietyType === item.varietyType) {
					this.$store.commit('setCurVariety', value)
				}
			})
			//    <router-link :to="{path:'/detailorder',query: {batchNo:item.batchNo,varietyType:item.varietyType}}">
			this.$router.push({
				path: '/detailorder',
				query: { batchNo: item.batchNo, varietyType: item.varietyType }
			})
		}
	},
	beforeDestroy() {
		clearTimeout(this.quotaTimer)
		clearTimeout(this.orderTimer)
		clearTimeout(this.pendingOrderTimer)
	}
}
</script>
<style scoped lang='scss'>
.nav {
	line-height: rem(45px);
	display: flex;
	position: relative;
	border-bottom: 1px solid #dfdfdf;
}

.nav span {
	flex: 1;
}

.nav span i {
	display: inline-block;
}

.nav span.red i {
	border-bottom: rem(2px) solid #f96d46;
}

.nav ul {
	position: absolute;
	top: rem(40px);
	left: 13%;
	z-index: 9;
	box-shadow: 0 0 rem(5px) #999;
	border-radius: rem(2px);
	overflow: hidden;
}

.nav ul li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.nav ul li:last-child {
	border-bottom: 0 none;
}

.gold {
	background-color: #b33b3b;
}

.gold1 {
	background-color: #9c2222 !important;
}

.topup {
	border-radius: rem(4px);
}

span.rl {
	border-right: 1px solid #efefef;
}
.winLossWrap,
.addOrderWrap {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 102;
	background-color: rgba(0, 0, 0, 0.5);
	border: 1px solid #ddd;
}

.winLossWrap .content,
.addOrderWrap .content {
	position: absolute;
	width: 100%;
	bottom: 0;
	overflow: hidden;
}

.winLossWrap .action,
.addOrderWrap .action {
	display: flex;
	justify-content: space-between;
}

.winLossWrap .action em,
.addOrderWrap .action em {
	width: 50%;
	/*text-align: center;*/
}

.winLossWrap .action em:first-child,
.addOrderWrap .action em:first-child {
	border-right: 1px solid #555767;
	color: #fff;
}

.winLossWrap .action em:nth-child(2),
.addOrderWrap .action em:nth-child(2) {
	color: #ffaa0d;
}

.winLossWrap .set p,
.addOrderWrap .set p {
	box-sizing: border-box;
	border: 1px solid #ffaa0d;
	background-color: #ffaa0d;
	border-radius: 2px;
	overflow: hidden;
}

.winLossWrap .set span,
.addOrderWrap .set span {
	box-sizing: border-box;
	width: rem(30px);
	height: rem(30px);
	color: #fff;
}

.winLossWrap .set input,
.addOrderWrap .set input {
	box-sizing: border-box;
	border: 0 none;
	line-height: rem(30px);
	width: rem(80px);
	text-align: center;
}

.winLossWrap .set .icon,
.addOrderWrap .set .icon {
	margin-top: rem(7px);
}
</style>